<template>
  <div>
    <van-nav-bar fixed title="京剧班复试成绩查询" />
    <div style="margin-top: 40px">
      <van-sticky>
        <van-search
          v-model="searchValue"
          placeholder="请输入身份证号查询"
          show-action
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </van-sticky>
      <!-- 搜索提示 -->
      <van-empty
        v-if="JSON.stringify(userParams) === '{}'"
        description="请输入身份证号查询"
        image="search"
      />
      <van-cell-group v-else>
        <van-cell :label="userParams.zy || '戏曲表演'" center title="专业" />
        <van-cell :label="userParams.xm" center title="姓名" />
        <van-cell :label="userParams.xb" center title="性别" />
        <van-cell :label="userParams.zyfs" center title="成绩" />
        <van-cell :label="userParams.sfzh" center title="身份证号" />
        <van-cell :label="userParams.gkbmb" center title="准考证号" />
        <van-cell center title="备注">
          <template #label>
            <div
              :style="{
                color:
                  userParams.bz === '录取' ? 'green' : userParams.bz === '未录取' ? 'red' : 'black',
                fontWeight: 700,
              }"
            >
              {{ userParams.bz || '暂无' }}
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import axios from '@/utils/http/axios';
  import { Notify } from 'vant';

  const userParams = ref({});
  const searchValue = ref('');
  const onSearch = async () => {
    axios
      .post(
        `https://szhy.artcollegehb.cn/gateway/eaApi/ea/temp-score/queryScore?like=${searchValue.value}`
      )
      .then(({ data }) => {
        if (data.code === 0) {
          userParams.value = data.data;
        } else {
          Notify(data.msg);
        }
      });
  };
</script>
